import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:loading_animations/loading_animations.dart';
import 'package:video_player/video_player.dart';
import 'package:easy_video/controller/video/detail_controller.dart';
import 'package:easy_video/model/video_chapter_model.dart';
import 'package:easy_video/view/video/full_screen_video_player.dart';
import 'package:easy_video/widgets/auto_image_widget.dart';

class DetailView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      builder: (controller) {
        if (controller.loading) {
          return Scaffold(
            appBar: AppBar(),
            body: Center(
              child: LoadingBouncingGrid.square(
                size: 50,
                backgroundColor: Colors.black,
              ),
            ),
          );
        }
        return Scaffold(
          appBar: AppBar(
              // actions: [
              //   IconButton(
              //     onPressed: () {},
              //     icon: Icon(
              //       Icons.share,
              //       size: 30,
              //       color: Colors.black,
              //     ),
              //   ),
              //   SizedBox(
              //     width: 10,
              //   ),
              //   IconButton(
              //     onPressed: () {},
              //     icon: Icon(
              //       Icons.favorite_border,
              //       size: 30,
              //       color: Colors.black,
              //     ),
              //   ),
              //   SizedBox(
              //     width: 20,
              //   ),
              // ],
              ),
          body: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 250,
                  child: controller.pick_chapter
                      ? Container(
                          color: Colors.black,
                          child: AspectRatio(
                            aspectRatio:
                                controller.playerController.value.aspectRatio,
                            child: Stack(
                              children: [
                                VideoPlayer(
                                  controller.playerController,
                                ),
                                if (!controller
                                    .playerController.value.isPlaying)
                                  Positioned(
                                    top: 100,
                                    left: Get.width / 2.2,
                                    child: IconButton(
                                      onPressed: () {
                                        controller.pauseOrPlay();
                                      },
                                      icon: Icon(
                                        Icons.play_circle,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                Positioned(
                                  bottom: 0,
                                  left: 0,
                                  child: Container(
                                    width: Get.width,
                                    child: Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Flexible(
                                          child: IconButton(
                                            onPressed: () {
                                              controller.pauseOrPlay();
                                            },
                                            icon: Icon(
                                              color: Colors.white,
                                              controller.playerController.value
                                                      .isPlaying
                                                  ? Icons.pause
                                                  : Icons.play_arrow,
                                            ),
                                          ),
                                        ),
                                        Flexible(
                                          flex: 6,
                                          child: Container(
                                            child: VideoProgressIndicator(
                                              padding: EdgeInsets.zero,
                                              controller.playerController,
                                              allowScrubbing: true,
                                            ),
                                            height: 5,
                                          ),
                                        ),
                                        Flexible(
                                          flex: 1,
                                          child: IconButton(
                                            onPressed: () {
                                              Navigator.push(
                                                context,
                                                MaterialPageRoute(
                                                  builder: (context) =>
                                                      FullScreenVideoPlayerView(
                                                        controller
                                                            .playerController,
                                                      ),
                                                ),
                                              );
                                            },
                                            icon: Icon(
                                              Icons.fullscreen,
                                              color: Colors.white,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          constraints: BoxConstraints(
                            minHeight: 250,
                          ),
                          width: Get.width,
                        )
                      : AutoImage.buildImage(
                          controller.video.Thumb,
                          fit: BoxFit.fitWidth,
                          width: Get.width,
                          height: 250,
                        ),
                ),
                Container(
                  padding: EdgeInsets.only(
                    top: 10,
                    left: 30,
                    right: 30,
                  ),
                  child: Text(
                    controller.video.Title,
                    style: TextStyle(
                      fontSize: 30,
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                    left: 30,
                    top: 10,
                    right: 30,
                  ),
                  child: Text(
                    List<String>.from([
                      controller.video.Year,
                      controller.video.Duration,
                      controller.video.CategoryName
                    ])
                        .where(
                          (item) => item.isNotEmpty,
                        )
                        .join("|"),
                    style: TextStyle(
                      color: Colors.grey,
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                    top: 10,
                    left: 30,
                    right: 30,
                  ),
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: List.generate(
                        controller.channel_list.length,
                        (index) {
                          return GestureDetector(
                            child: Container(
                              child: Text(
                                controller.channel_list[index].TypeText,
                                style: TextStyle(
                                  fontSize: 19,
                                  color:
                                      controller.channel_current_index == index
                                          ? Colors.black
                                          : Colors.grey,
                                ),
                              ),
                              padding: EdgeInsets.only(
                                right: 10,
                              ),
                            ),
                            onTap: () {
                              controller.changeChannel(index);
                            },
                          );
                        },
                      ),
                    ),
                  ),
                ),
                Container(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: List.generate(
                        controller.chapter_list.length,
                        (index) {
                          return _listItem(
                            controller.chapter_list[index],
                            controller,
                          );
                        },
                      ),
                    ),
                  ),
                  padding: EdgeInsets.only(
                    top: 20,
                    left: 30,
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                    top: 20,
                    left: 30,
                    right: 30,
                  ),
                  child: Text(
                    "详情",
                    style: TextStyle(
                      fontSize: 20,
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                    top: 10,
                    left: 30,
                    right: 30,
                  ),
                  child: Text(
                    controller.video.Desc,
                    style: TextStyle(
                      color: Colors.grey,
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
      init: DetailController(),
    );
  }
}

class _listItem extends StatelessWidget {
  final VideoChapterModel chapter;

  final DetailController controller;

  _listItem(this.chapter, this.controller);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        width: 150,
        height: 100,
        margin: EdgeInsets.only(
          right: 30,
        ),
        child: Container(
          padding: EdgeInsets.all(5),
          child: Icon(
            Icons.play_arrow_sharp,
            color: Colors.white,
            size: 30,
          ),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.3),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AutoImage.buildImageProvider(
              this.chapter.Thumb,
            ),
          ),
        ),
      ),
      onTap: () {
        this.controller.playVideo(this.chapter.Id);
      },
    );
  }
}
